import React, {Component} from 'react'
import {
    View,
    Text,
    ScrollView,
    Image,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    Modal
} from 'react-native'
import ImagePicker from 'react-native-image-crop-picker'
// import LocalBarcodeRecognizer from 'react-native-local-barcode-recognizer';
import {readerQR} from 'react-native-lewin-qrcode'


const {width, height} = Dimensions.get('window')
export default class  extends Component {
    constructor(props) {
        super(props)
        this.state = {
            show: true
        }
    }

    onPressImagePicker() {
        ImagePicker.openPicker({
            width: 300,
            height: 300,
            cropping: false,
            includeBase64:true,
            mediaType: 'image'
          }).then(image => {
              this._handleImage(image);
          });
    }

    async _handleImage(image) {
        // const result = await readerQR(image.path)
        readerQR(image.path).then(
            console.log('lch---00---', image.path)
        ).catch(err=>{

        })
        console.log('lch---111--', result)
    }

    render() {
        const {show} = this.state
        return (
            <Modal
                visible={show}
                transparent={true}
                onRequestClose={()=>this.setState({show:false})}>
                <View style={styles.main}>
                    <View style={styles.content}>
                        <TouchableOpacity 
                            style={styles.touch}>
                            <Text>打开相机</Text>
                        </TouchableOpacity>
                        <TouchableOpacity 
                            onPress={()=>this.onPressImagePicker()}
                            style={[styles.touch,{borderBottomWidth:0}]}>
                            <Text>从相册选择</Text>
                        </TouchableOpacity>
                    </View>
                </View>
             </Modal>
        )
    }
}
const styles = StyleSheet.create({
    main: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.5)',
        justifyContent: 'center',
        alignItems: 'center'
    },
    content: {
        borderRadius: 5,
        backgroundColor: '#fff',
        width: width-40,
    },
    touch: {
        justifyContent: 'center',
        alignItems: 'center',
        height: 48,
        borderBottomColor: '#f2f2f2',
        borderBottomWidth: 1,
        marginHorizontal: 10
    },
    touchTitle: {
        fontSize: 16,
        color: '#000'
    }
})